<template>
    <ak-title>AKjs前端框架 > 组件</ak-title>

    <ak-main>
        <div class="module bg_white mt_2 mb_2 wm_96">
            <fieldset class="pos_rel ovh bg_gray_ccc">
                <h3 class="fs_16rem c_black line_h_4rem text_al_c">数据变化插件展示</h3>
                <button class="plug_popup btn_hover-aylen pos_abs right_0 top_0 mr_08rem mt_08rem h_24rem bor_rad_1rem bg_orange border2 bor_orange c_white w_10"><i class="icon-ln_zhixiangxia"></i> 立即下载</button>
            </fieldset>
            <ul class="ovh verline_list length4 pb_1rem pt_1rem">
                <li class="fl pos_rel">
                    <h3 class="dis_inbl c_theme mt_3 ml_5 fs_14rem bor_bottom pb_02rem">功能插件总数量</h3>
                    <p class="dis_block text_al_c">
                        <em class="plug_count line_h_24rem fs_28rem" data-from="0" data-speed="1500" data-decimals="0"></em>
                        <span class="fs_12rem">个</span>
                    </p>
                </li>
                <li class="fl pos_rel">
                    <h3 class="dis_inbl c_theme mt_3 ml_5 fs_14rem bor_bottom pb_02rem">昨天数量</h3>
                    <p class="dis_block text_al_c">
                        <em class="line_h_24rem fs_28rem">0</em>
                    </p>
                </li>
                <li class="fl pos_rel">
                    <h3 class="dis_inbl c_theme mt_3 ml_5 fs_14rem bor_bottom pb_02rem">今天数量</h3>
                    <p class="dis_block text_al_c">
                        <em class="line_h_24rem fs_28rem">0</em>
                    </p>
                </li>
                <li class="fl pos_rel">
                    <h3 class="dis_inbl c_theme mt_3 ml_5 fs_14rem bor_bottom pb_02rem">总数量</h3>
                    <p class="dis_block text_al_c">
                        <em class="line_h_24rem fs_28rem">0</em>
                    </p>
                </li>
            </ul>
        </div>
        <div class="module bg_white mt_2 mb_2 wm_96">
            <fieldset class="pos_rel ovh bg_gray_ccc">
                <h3 class="fs_16rem c_black line_h_4rem text_al_c">进度插件展示</h3>
            </fieldset>
            <ul class="wm_96 ovh mb_2">
                <li class="pos_rel ovh">
                    <div data-from="30" data-to="70" class="plug_progress1 h_3rem bg_gray_ddd mt_18rem"></div>
                </li>
                <li class="pos_rel ovh">
                    <div data-from="10" data-to="90" class="plug_progress2 h_3rem bg_gray_ddd mt_18rem"></div>
                </li>
            </ul>
        </div>
        <div class="module bg_white mt_2 mb_2 wm_96">
            <fieldset class="pa_5">
                <select class="plug_select w_20rem h_34rem line_h_32rem c_gray_777 bor_rad_05rem bor_gray_ddd border bg_gray_f5f">
                    <option value="0">选择1</option>
                    <option value="1">测试1</option>
                    <option value="2" selected>测试2</option>
                    <option value="3">测试3</option>
                    <option value="4">测试4</option>
                    <option value="5">测试5</option>
                    <option value="6">测试6</option>
                    <option value="7">测试7</option>
                    <option value="8">测试8</option>
                    <option value="9">测试9</option>
                </select>
                <select data-type="router-link" class="plug_select w_20rem h_34rem line_h_32rem c_gray_777 bor_rad_05rem bor_gray_ddd border bg_gray_f5f">
                    <option value="0">选择2</option>
                    <option value="1">测试1</option>
                    <option value="2">测试2</option>
                    <option value="3">测试3</option>
                    <option value="4">测试4</option>
                    <option value="5">测试5</option>
                    <option value="6">测试6</option>
                    <option value="7">测试7</option>
                    <option value="8">测试8</option>
                    <option value="9">测试9</option>
                </select>
            </fieldset>
        </div>
        <h3 class="line_h_3rem bor_bottom bor_gray_ddd fs_12rem text_ind_2rem">校验功能展示</h3>
        <section class="wm_94 bg_white pa_2 mt_2rem ovh pos_rel" id="plug_valid">
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">送货时间：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="text" id="plug_Pickup" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="">
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">用户名：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="text" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="" data-valid="empty">
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">密码：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="password" class="plug_passlevel fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="" data-valid="pwd">
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">确认密码：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="password" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="" data-valid="repwd">
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">邮箱：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="text" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="" data-valid="email">
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">颜色：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <select class="plug_select w_100 h_in line_h_26rem c_gray_777 bg_gray_f5f" data-valid="select">
                        <option value="">请选择</option>
                        <option value="1">红色</option>
                        <option value="2">蓝色</option>
                    </select>
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">爱好：</span>
                </dt>
                <dd class="fl ovh w_80 h_26rem">
                    <input type="checkbox" name="checkbox1" class="plug_Checkbox" data-valid="checkbox" /> <span class="mr_1rem">足球</span>
                    <input type="checkbox" name="checkbox2" class="plug_Checkbox" data-valid="checkbox" /> <span class="mr_1rem">音乐</span>
                    <input type="checkbox" name="checkbox3" class="plug_Checkbox" data-valid="checkbox" /> <span class="mr_1rem">旅游</span>
                    <input type="checkbox" name="checkbox4" class="plug_Checkbox" data-valid="checkbox" /> <span class="mr_1rem">看书</span>
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">性别：</span>
                </dt>
                <dd class="fl ovh w_80 h_26rem">
                    <input type="radio" name="radio" value="1" class="plug_Radio" data-valid="radio" /> <span class="mr_1rem">女性</span>
                    <input type="radio" name="radio" value="2" class="plug_Radio" data-valid="radio" /> <span class="mr_1rem">男性</span>
                </dd>
            </dl>
            <dl class="pos_rel ovh mb_1rem">
                <dt class="fl ovh w_10 text_ind_2rem">
                    <span class="line_h_26rem">电话：</span>
                </dt>
                <dd class="fl ovh bor_gray_ccc border bor_rad_03rem w_80 h_26rem">
                    <input type="text" class="fl pos_rel z_index_1 bg_none w_100 text_ind_1rem c_gray_777 line_h_26rem" value="" placeholder="" data-valid="mobile">
                </dd>
            </dl>
            <button type="submit" class="ml_10 mt_1rem mb_4rem bg_theme c_white bor_rad_03rem pl_3rem pr_3rem h_28rem">保存</button>
        </section>
    </ak-main>
    <dialog class="plug_PopupWin dis_none w_40"> <!--中间位置显示的弹窗-->
        <div class="plug_progress4 h_3rem bg_white"></div>
    </dialog>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
    var Json_vData = {
        empty: {
            norm: Regs_userid, //格式正则表达式-用户名校验 （方法：AKjs_RegsInput）
            empty: '请输入用户名！', //输入框空值或者未选中状态时的提示文字
            error: '用户名格式有误！' //norm的正则不匹配时提示的文字
        },
        pwd: {
            norm: Regs_password, //格式正则表达式-密码校验 （方法：AKjs_RegsInput）
            empty: '请输入密码！', //输入框空值或者未选中状态时的提示文字
            error: '密码格式有误！' //norm的正则不匹配时提示的文字
        },
        repwd: {
            norm: $('[data-valid="pwd"]'), //指定元素的值对比
            empty: '请输入密码！', //输入框空值或者未选中状态时的提示文字
            error: '两次输入的密码不一致！' //norm的正则不匹配时提示的文字
        },
        email: {
            norm: Regs_email, //格式正则表达式-邮箱校验 （方法：AKjs_RegsInput）
            empty: '请输入邮箱地址！', //输入框空值或者未选中状态时的提示文字
            error: '邮箱格式有误！' //norm的正则不匹配时提示的文字
        },
        mobile: {
            norm: Regs_mobile, //格式正则表达式-邮箱校验 （方法：AKjs_RegsInput）
            empty: '请输入手机号码！', //输入框空值或者未选中状态时的提示文字
            error: '手机号码格式有误！' //norm的正则不匹配时提示的文字
        },
        radio: {
            norm: 1,  //正则表达式-单选校验 （方法：AKjs_RegsInput）
            error: '请选择您的性别！' //norm的正则不匹配时提示的文字
        },
        checkbox: {
            norm: '[2,4]', //正则表达式-复选区间校验 （方法：AKjs_RegsInput）
            error: '2-4项爱好！' //norm的正则不匹配时提示的文字
        },
        select: {
            norm: Regs_empty, //格式正则表达式-空值校验 （方法：AKjs_RegsInput）
            empty: '请选择喜欢的颜色！' //输入框空值或者未选中状态时的提示文字
        },
        file: {
            norm: Regs_image, //正则表达式-图片校验（jpg,gir,png） （方法：AKjs_RegsInput）
            error: '请选择您的头像！' //norm的正则不匹配时提示的文字
        }
    };

    /*-----------------------------------------------AKjs_Validate 使用方法-------------------------------------------*/
    $(function() {
        $('#plug_valid').AKjs_Validate({
            valid: Json_vData, //调用Json数据（正则和提示文字）
            VerifyClass: "c_red", //提示文字的样式设置
            focusBack: function (ele, index, flag) { //表单实时焦点回调 （ele:获取当前焦点元素，index: 获取当前焦点元素的排号，flag：检查所有表单的正则是否通过）
                //console.log(ele)
                //console.log(index)
                //console.log(flag)
                if (!flag) { //正则不通过
                    if (index == 0) { //用户名
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    } else if (index == 1) { //密码
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    } else if (index == 2) { //确认密码
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    } else if (index == 3) { //邮箱
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    } else if (index == 4) { //颜色
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    } else if (index == 11) { //电话
                        ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                    }
                } else { //正则通过
                    if (index == 0) { //用户名
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                        ele.message(true); //不提示错误提示，但提交按钮禁止提交数据
                        setTimeout(function () {
                            user = "admin";
                            if (ele.val() == user) {
                                ele.message(true,"该用户名已存在！"); //显示后台数据对比后的错误提示文字 ("true代表禁止按钮提交数据","错误提示文字")
                                ele.parent().addClass("bor_red"); //给当前焦点元素加红色边框
                            } else {
                                ele.message(false); //关闭后台数据对比后的错误提示文字 ("false代表提交按钮可正常提交")
                            }
                        },1000);

                    } else if (index == 1) { //密码
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                    } else if (index == 2) { //确认密码
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                    } else if (index == 3) { //邮箱
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                    } else if (index == 4) { //颜色
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                    } else if (index == 11) { //电话
                        ele.parent().removeClass("bor_red"); //给当前焦点元素移除红色边框
                    }
                }
            },
            clickBack: function (ele, form, flag) { //点击提交按钮后的回调 （ele:获取提交按钮元素，form: 获取整个表单元素，flag：检查所有表单的正则是否通过）
                //console.log(flag);
                if (flag) { //正则通过
                    form.find("input").each(function(){
                        $(this).attr("readonly","readonly");
                    });
                    ele.disabled(true); //为了防止重复提交，给提交按钮加disabled状态，不能再点击 （解除disabled状态改为false即可）
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_PassLevel 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_passlevel").AKjs_PassLevel({ //密码强度检测
            O_color: "#cccccc", //默认颜色
            L_color: "#e85959", //弱的颜色
            M_color: "#e85959", //中的颜色
            H_color: "#e85959", //强的颜色
            L_text: "弱", //弱的文字
            M_text: "中", //中的文字
            H_text: "强", //强的文字
            callback: function(input,ele,flag) {
                ele.addClass("mt_3rem");
                if (flag) {
                    input.parents("dl").addClass("h_6rem");
                } else {
                    input.parents("dl").removeClass("h_6rem");
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_SelectOption 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_select").AKjs_SelectOption({
            active: "bg_theme c_white", //下拉列表被选中时样式
            boxheight: 5, //下拉框展开后的列表区域的高度 (设置默认显示的列表数量)
            speed: 300, //下拉框展开和折叠毫秒时间
            callback:function(ele,list,val,text){ //初始化回调
                list.addClass("minus_mb_06rem");
                //console.log(ele);
                //console.log(list);
                //console.log(val);
                //console.log(text);
            },
            clickback:function(flag,ele,list,val,text){ //点击回调（flag获取选中状态）
                if (flag) {
                    console.log(ele);
                    console.log(list);
                    console.log(val);
                    console.log(text);
                } else {
                    console.log(ele);
                    console.log(list);
                }
            }
        });
    });

    /*-----------------------------------------------AKjs_Checkbox 使用方法-------------------------------------------*/
    $(function () {
        $(".plug_Checkbox").AKjs_Checkbox({
            checkedClass: "icon-ln_zhengque bg_theme bor_theme c_white", //选中后的样式
            disabledClass: "icon-ln_zhengque bg_gray_ccc bor_gray_ccc c_white", //不能选择的样式
            onChange:function(chk){ //回调获取当前的选中状态
                console.log(chk);
            }
        });
    });

    /*-----------------------------------------------AKjs_Radio 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_Radio").AKjs_Radio({
            boxSize: "2rem",
            checkedClass: "icon-yk_yuanquan_fill c_theme", //选中后的样式
            onChange:function(chk){ //回调获取当前的选中状态
                console.log(chk);
            }
        });
    });

    /*-----------------------------------------------AKjs_Popupwin 使用方法-------------------------------------------*/
    $(function(){
        $(".plug_popup").click(function(){
            AKjs_Popupwin({
                dom: ".plug_PopupWin", //弹窗内容的布局
                position: "middle", //位置类型(top，bottom，left，right，middle)
                effectIn: "fadeIn", //弹窗显示效果
                effectOut: "fadeOut", //弹窗消失效果
                maskPosition:"11", //Mask的z-index数值
                closeBtn: ".ak-mask", //关闭弹窗按钮的Class名
                callback:function (ele,toggle) { //通过回调获取弹窗显示后的以上参数
                    if (toggle) { //判断是否弹出弹窗
                        //console.log($(ele[0].dom)); //获取当前的弹窗元素
                        $(".plug_progress4").AKjs_Progress({
                            goalAmount: 100, //总进度数值
                            currentAmount: 100, //当前进度数值
                            milestoneNumber: 100, //数字达到当前设置的参数后进度条的颜色变化
                            speed: 5000, //动画速度
                            milestoneClass: "bg_theme", //milestoneNumber参数背景颜色
                            ColorStyle: "bg_theme c_white", //进度条样式设置
                            textBefore: "当前下载进度：", //当前进度文字
                            textAfter: "%", //当前进度百分比文字
                            callback: function () { //通过回调获取元素
                                //console.log(this);
                                setTimeout(function () {
                                    $(".ak-mask").click();
                                }, 5000);
                                setTimeout(function () {
                                    AKjs_WebToast("恭喜您，成功下载数据！", "middle", "mask", 5000); //(提示文字，显示位置 [top ，middle ，bottom ]，遮挡背景[加mask即可用]，耗时)
                                }, 6000);
                            }
                        });
                    }
                }
            })
        })
    });

    /*-----------------------------------------------AKjs_CountTo 使用方法-------------------------------------------*/
    $(function () {
        $(".plug_count").AKjs_CountTo({
            to: $(".plug_nav").children("li").length
        }); //数字加动画变化效果
    });
    /*-----------------------------------------------AKjs_Progress 使用方法-------------------------------------------*/
    $(function () {
        $(".plug_progress1").AKjs_Progress({
            goalAmount: 100, //总进度数值
            currentAmount: 60, //当前进度数值 （也可以元素里加data-to参数设置, 初始化开始参数设置属性为元素里加data-form即可）
            milestoneNumber: 90, //数字达到当前设置的参数后进度条的颜色变化
            speed: 3000, //动画速度
            milestoneClass: "bg_theme", //milestoneNumber参数背景颜色
            ColorStyle: "bg_theme c_white", //进度条样式设置
            textBefore: "当前进度：", //当前进度文字
            textAfter: "%", //当前进度百分比文字
            callback: function() { //通过回调获取元素
                //console.log(this);
            }
        });
    });
    $(function () {
        $(".plug_progress2").AKjs_Progress({
            goalAmount: 100, //总进度数值
            currentAmount: 90,  //当前进度数值 （也可以元素里加data-to参数设置, 初始化开始参数设置属性为元素里加data-form即可）
            milestoneNumber: 80, //数字达到当前设置的参数后进度条的颜色变化
            speed: 3000, //动画速度
            milestoneClass: "bg_jd", //milestoneNumber参数背景颜色
            ColorStyle: "bg_theme c_white", //进度条样式设置
            textBefore: "当前进度：", //当前进度文字
            textAfter: "%", //当前进度百分比文字
            callback: function() { //通过回调获取元素
                //console.log(this);
            }
        });
    });
    /*-----------------------------------------------AKjs_PickupTime 使用方法-------------------------------------------*/
    $(function() {
        $("#plug_Pickup").AKjs_PickupTime({
            dateleng: 8, //天数设置
            minute: 10, //间隔分钟设置
            width: "200px", //下拉框宽度
            boxheight: 5, //下拉列表默认显示数量
            speed: 500, //下拉动画毫秒
            dateflag: true, //是否显示左侧日期区域 (true/false)
            mouse: "click", //操作类型 (click/focus/hover)
            selectedClass: "c_theme", //选中后的文字样式
            weeks_text: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //星期文字设置
            today_text: "今天", //今天的文字
            months_text:"月", //月的文字
            days_text:"日", //日的文字
            callback:function(data,ele){ //选择下拉值回调入口 （获取选中值，获取元素）
                ele.val(data);
            }
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
